<template>
  <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" v-loading="isLoading">
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="条件配置" prop="condition">
          <el-table :data="formInline.condition" style="width: 100%" footer-row-class-name="hide">
            <el-table-column prop="day" label="触发类型" minWidth="120" show-overflow-tooltip>
              <template v-slot="scope">
                <el-select v-model="scope.row.triggerType" @change="scope.row.triggerParam = null" placeholder="请选择">
                  <el-option v-for="item in TRIGGERTYPE" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="day" label="触发参数" minWidth="120" show-overflow-tooltip>
              <template v-slot="scope">
                <el-select v-model="scope.row.triggerParam" placeholder="请选择" @change="decfuzhi($event, scope.row, 1)"
                  v-if="scope.row.triggerType == 1">
                  <el-option v-for="item in alarmoptions" :key="item.alarmId" :label="item.alarmTitle"
                    :value="item.alarmAlias" />
                </el-select>
                <el-select v-model="scope.row.triggerParam" placeholder="请选择" @change="decfuzhi($event, scope.row, 2)"
                  v-if="scope.row.triggerType == 2">
                  <el-option v-for="item in deviceinfo.structInfo" :key="item.structId" :label="item.fieldName"
                    :value="item.fieldAlias" />
                </el-select>
                <el-select v-model="scope.row.triggerParam" placeholder="请选择" @change="decfuzhi($event, scope.row, 3)"
                  v-if="scope.row.triggerType == 3">
                  <el-option v-for="item in EVENTTRIGGER" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="scope.row.triggerParam" placeholder="请选择" @change="decfuzhi($event, scope.row, 4)"
                  v-if="scope.row.triggerType == 4">
                  <el-option v-for="item in deviceinfo.commandInfo" :key="item.commandId" :label="item.commandName"
                    :value="item.commandAlias" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="day" label="触发条件" minWidth="120" show-overflow-tooltip>
              <template v-slot="scope">
                <el-select v-model="scope.row.triggerTerm" v-if="scope.row.triggerType == 2" placeholder="请选择">
                  <el-option v-for="item in TRIGGERCONDITION" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="day" label="触发值" minWidth="120" show-overflow-tooltip>
              <template v-slot="{ row }">
                <el-input v-if="row.triggerType == 2" type="number" v-model.trim="row.triggerValue" placeholder="" />
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="90">
              <template v-slot="scope">
                <el-space>
                  <sj-link custom-type="sred" :disabled="scope.row.stepId == 1" :underline="false"
                    @click="deletes(scope, 1)">删除</sj-link>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer-wrapper">
            <el-table :data="[100]" :show-header="false" :border="true" class="footer-table">
              <el-table-column label="">
                <template #default>
                  <div class="text-center cursor-pointer py-[10px]" @click="addsetup">
                    添加
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="延迟时间/秒" prop="delay">
          <div class="flex gap-[16px]">
            <el-input v-model="formInline.delay" type="number" :min="0" placeholder="请输入延迟时间"></el-input>
            <span class="whitespace-nowrap text-[#ccc]">为0则立即执行</span>
          </div>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="控制设备" prop="control">
          <el-table :data="formInline.control" style="width: 100%" footer-row-class-name="hide">
            <el-table-column prop="day" label="设备信息" minWidth="120" show-overflow-tooltip>
              <template v-slot="scope">
                <el-select v-model="scope.row.deviceId" placeholder="请选择" @change="getoptions($event, scope.row)">
                  <el-option v-for="item in deviceoptions" :key="item.deviceId" :label="item.name"
                    :value="item.deviceId" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="day" label="控制命令" minWidth="120" show-overflow-tooltip>
              <template v-slot="scope">
                <el-select v-model="scope.row.commandId" placeholder="请选择" @change="changecommand($event, scope)">
                  <el-option v-for="item in scope.row.options" :key="item.id" :label="item.commandName"
                    :value="item.id" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="noticeUser" label="命令参数" show-overflow-tooltip width="160">
              <template v-slot="{ row }">
                <el-select v-model="row.commandArg" filterable remote v-if="row?.commandata?.paramType == 3"
                  remote-show-suffix>
                  <el-option v-for="item in row?.commandata?.value3" :key="item.value" :label="item.key"
                    :value="item.value" />
                </el-select>

                <el-input v-else-if="row?.commandata?.paramType == 2" v-model.trim="row.commandArg"
                  :min="row?.commandata?.value2[0]" :max="row?.commandata?.value2[1]" type="number"
                  :placeholder="`请输入${row?.commandata?.value2[0]}-${row?.commandata?.value2[1]}`" />
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="90">
              <template v-slot="scope">
                <el-space>
                  <sj-link custom-type="sred" :disabled="scope.row.stepId == 1" :underline="false"
                    @click="deletes(scope, 2)">删除</sj-link>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer-wrapper">
            <el-table :data="[100]" :show-header="false" :border="true" class="footer-table">
              <el-table-column label="">
                <template #default>
                  <div class="text-center cursor-pointer py-[10px]" @click="addsets">
                    添加
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { getDeviceCommand } from "@/api/operate/daily-inspection/Inspection-tasks/index";
import {
  TRIGGERCONDITION,
  TRIGGERPARAM,
  CONTROLMODE,
  TRIGGERTYPE
} from "@/constant/device-mangenment";
import {
  addControl,
  updateControl,
  getControlDetail,
  getDeviceListops,
  getAlarmListops
} from "@/api/operate/device-management/control-records/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { WORKORDER_NOTICE_TYPE } from "@/constant/workorder-mangenment";
import {
  WORKORDER_TYPE,
  WORKORDER_DISPATCH_TYPE
} from "@/constant/workorder-mangenment";
import { EVENTTRIGGER } from "@/constant/device-mangenment"
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { STRATEGYSTATUS } from "@/constant/device-mangenment";
import type { infoType } from "@/api/operate/work-management/process-configuration/index";
const centerDialogVisible = ref(false);
const props = defineProps({
  id: {
    type: Number,
    default: null
  },
  closedilog: {
    type: Function,
    default: true
  },
  deviceId: {
    type: Number,
    default: null
  },
  deviceinfo: {
    type: Object,
    default: {
      structInfo: [],
      commandInfo: []
    }
  },
  formInline: {
    type: Object,
    default: () => {
      return {
        condition: [],
        control: [],
        delay: ""
      }
    }
  }
});
const formRules = reactive(<FormRules>{
  condition: [{ required: true, message: "请填写条件配置", trigger: "blur" }],
  control: [{ required: true, message: "请填写控制设备", trigger: "blur" }],
  delay: [{ required: true, message: "请输入延迟时间", trigger: "blur" }]
});
const ruleFormRef = ref();
function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
//添加步骤
const addsetup = () => {
  props.formInline.condition.push({
    triggerType: "",
    triggerParam: "",
    triggerTerm: "",
    triggerValue: ""
  });
};
//删除步骤
const deletes = (ite, type) => {
  if (type == 2) {
    props.formInline.control.splice(ite.$index, 1);
  } else {
    props.formInline.condition.splice(ite.$index, 1);
  }
};
//添加步骤
const addsets = () => {
  props.formInline.control.push({
    productId: "",
    commandId: ""
  });
};
//选择触发参数时
const decfuzhi = (key, row, type) => {
  if (type == 1) {
    let titles = alarmoptions.value.filter(items => {
      return items.alarmAlias == row.triggerParam
    });
    row.triggerParamDesc = titles[0].alarmTitle
  } else if (type == 2) {
    let titles = props.deviceinfo.structInfo.filter(items => {
      return items.fieldAlias == row.triggerParam
    });
    row.triggerParamDesc = titles[0].fieldName
  } else if (type == 3) {
    let titles = EVENTTRIGGER.filter(items => {
      return items.value == row.triggerParam
    });
    console.log(titles)
    row.triggerParamDesc = titles[0].label
  } else if (type == 4) {
    let titles = props.deviceinfo.commandInfo.filter(items => {
      return items.commandAlias == row.triggerParam
    });
    row.triggerParamDesc = titles[0].commandName
  }
}
const deviceoptions = ref([])
const getdevicelist = () => {
  getDeviceListops({
    deviceName: "",
    deviceType: ""
  }).then(res => {
    if (res.code == 200) {
      res.result.forEach(item => {
        item.name = item.productName +'-'+ item.deviceSN
      });
      deviceoptions.value = res.result
      if (props.formInline.control && props.formInline.control.length > 0) {
        props.formInline.control.forEach(item => {
          let productIds = deviceoptions.value.filter(items => {
            return items.deviceId == item.deviceId
          });
          getDeviceCommand({ productId: productIds[0].productId }).then(res => {
            item.options = res.result.data;

            let indexdata = item.options.filter(itema => {
              return itema.id == item.commandId
            });
            item.commandata = indexdata[0]
          });
        });
      }
      console.log(props.formInline.control, "props.formInline.control")
    }
  });

}
setTimeout(() => {
  getdevicelist()
}, 300);
const close = () => {
  centerDialogVisible.value = false;
  props.closedilog(1);
};
//选择设备时
const getoptions = (id, row) => {
  let productIds = deviceoptions.value.filter(item => {
    return item.deviceId == id
  });
  getDeviceCommand({ productId: productIds[0].productId }).then(res => {
    row.options = res.result.data;
    row.commandId = null
  });
}
const changecommand = (id, scope) => {
  scope.row.commandArg = null
  let indexdata = scope.row.options.filter(item => {
    return item.id == id
  });
  props.formInline.control[scope.$index].commandata = indexdata[0]
}
//条件配置方法
//获取告警下拉框
const alarmoptions = ref([])
const getalarmlist = () => {
  getAlarmListops({
    productId: props.deviceinfo.productId,
  }).then(res => {
    if (res.code == 200) {
      alarmoptions.value = res.result
    }
  });
};
getalarmlist();
</script>
<style lang="scss" scoped>
.hide {
  display: none;
}

/* 设置尾部添加的行的样式 */
.footer-wrapper {
  margin-top: -1px;
  /* 重叠原表格的分隔线 */
  width: 100%;

  ::v-deep(.el-table__cell) {
    padding: 0 !important;
  }
}

.footer-table .el-table__row {
  padding: 0 !important;
  background-color: #f2f2f2;
  /* 设置合计行的背景色 */
}
</style>
